<template>
  <div class="inform-hd-risk">
    <div id="myChartt" :style="{width: '362px', height: '300px'}"></div>
  </div>
</template>
<script>
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
require('echarts/lib/chart/line')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')	
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChartt'))
        // 绘制图表
        myChart.setOption({
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['订单准确率','排程准确率'],
        x: 'left'
    },
    grid: {
        left: '2%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },    
    toolbox: {
        show: true,
        feature: {
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['第12周','第13周','第14周','第15周','第16周','第17周','第18周','当前周']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'订单准确率',
            type:'line',
            stack: '总量',
            data:[120, 132, 101, 134, 90, 230, 210,50]
        },
        {
            name:'排程准确率',
            type:'line',
            stack: '总量',
            data:[220, 182, 191, 234, 290, 330, 310,45]
        }
    ]
        });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
